@import './base.css';

html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    /* 元素展示位置 */
    place-items: normal;
  }

  #app {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    padding: 0;
  }
}


/*  alibaba icon多色图标通用配置 */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


/* HomeView的首个div样式 */
.common-layout {
  /* border: 1px solid red; */
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;

}










/* ======================================1.左侧菜单 start================================================== */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.aside {
  /* 背景色 */
  background-color: #f9f9f9;
  /* 平滑过渡效果，持续时间为0.3秒，使用ease缓动函数 */
  transition: width 0.4s ease;

  /* 最大高度 */
  max-height: 700px;

  height: 700px;

  /* border: 1px solid rgb(40, 18, 236); */
}

/* 固定定位，加一个父div */
.aside-list {
  position: fixed;
  left: 0;
  max-height: 100vh;

  /* 允许垂直滚动 */
  overflow-y: auto;

  width: 200px;

}




/* 图标样式 */
.aside i {
  font-size: 24px;
  font-weight: 500;
  margin-right: 5px;
}

/* 去除扩展按钮的边框 */
.aside .el-radio-button__inner {
  border: none;
  font-size: 20px;
}


.el-sub-menu__title {
  background-color: #f9f9f9;
}


/* 菜单图片和名称间隔 */
.el-sub-menu__title .icon {
  margin-right: 10px;
}

/* ======================================1.左侧菜单 end================================================== */


/* ================================== 2.右边头部 start==================================================*/
/* 加一个背景色，突出头部和下面的区分 */
.right-main-content {
  background: #fcfcfc;
}


/* 页面头部 */
.el-header {
  /* 超过这个宽度，就显示全屏 */
  min-width: 1280px;
  /* 固定定位 */
  position: fixed;
  /* 层级 */
  z-index: 999;
}



.headerNav {
  /* 水平展示 */
  display: flex;
  /* 水平对齐-左侧 */
  justify-content: flex-start;
  /* 垂直对齐 */
  align-items: center;
  /* 高度 */
  height: 100%;
  /*  边距 */
  padding: 0;
  /* 宽度 */
  width: 100%;
  /* 使宽度充满整个视口 */
  min-width: 1280px;
  /* 居中 */
  margin: 0 0 0 0;
  /* border: 1px solid rgb(230, 20, 20); */
  background-color: #FFF;
  /* 阴影 */
  box-shadow: 0 12px 10px -10px rgba(0, 0, 0, .1);
  /* 边框 */
  /* border: #50db25 1px solid; */
}



.headerNav img {
  width: 100%;
  height: 100%;
}




.header-logo {
  /* border: #50db25 1px solid; */
  height: 100%;
}

.header-right {
  flex-direction: row;
  /* border: #50db25 1px solid; */
  flex-grow: 3;
  height: 100%;
  display: flex;
  justify-content: right;
}

/* 边距 */
.header-right .el-link {
  font-size: large;
 margin-left: 50px;
}

/* 伪类选择器 */
.el-dropdown-link:focus {
  outline: none;
}

.header-right .el-dropdown-link {
  margin: 0 40px;
  margin-top: 4px;
  font-size: medium;
}

.el-dropdown-link .el-dropdown-item {
  font-size: medium;
}

/* ================================== 2.右边头部 end ==================================================*/





/* ==============================3.右边主内容 start ================================================== */
.recommend {
  /* 宽度 */
  width: 100%;
  /* 高度 */
  /* height: 4000px; */
  /* max-height: 500px; */
  /* overflow: auto ; */
  /* 内边距 */
  padding: 20px;
  /* 盒子模型 */
  box-sizing: border-box;
  /* 确保内边距和边框不超出总高度 */
  margin-top: 40px;
  /* 边框 */
  /* border: #f34013 1px solid; */
}



/* 搜索框样式 */
.recommend-search {
  width: 100%;
  height: 300px;
  /* 背景图 */
  background-image: url('./daohang/header-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  /* 设置为 Flexbox 容器 */
  justify-content: center;

}


.input-with-select {
  height: 50px;
  margin-top: 130px;
  max-width: 600px;
}





/* 单个菜单 */
.recommend-one {
  height: 300px;
  width: 100%;
  border-radius: 10px;
  margin-top: 20px;
  /* 背景渐变 浅蓝色到浅粉色 */
  background: linear-gradient(to right, #87CEEB, #FFC0CB);
}


/* 标题图片样式 */
.recommend-title>svg {
  margin-left: 10px;
  margin-right: 10px;
}

.recommend-title>span {
  font-size: larger;
  margin-bottom: 10px;
}



.recommend-content {
  margin-top: 10px;
  margin-left: 15px;
}




/* flex容器设置 */
.recommend-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
  padding: 0;
}

/* flex容器内部项目的属性配置 */
.recommend-list li {
  /* 每个 li 占据 1/4 的宽度 */
  flex: 0 0 calc(100% / 5 - 20px);
  /* 最大宽度为 100% / 4 - 20px */
  max-width: calc(100% / 5 - 20px);
}

.recommend-list li:hover {
  /* 向上移动 */
  transform: translateY(-10px);
}


.recommend-list a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  border-radius: 10px;
}




.list-recommend {
  display: flex;
  align-items: stretch;
  height: 70%;
  box-sizing: border-box;
  background-color: #ffffff;

}

.list-recommend-img {
  flex: 0 0 33.33%;
  /* 图片部分占据 1/3 宽度 */
  margin-right: 10px;
  /* 图片与标题之间的间距 */
  height: 50px;
  display: flex;
  /* 使图片垂直居中 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  padding: 10px;
  /* background-color: aqua; */
}

.list-recommend-img img {
  max-width: 100%;
  /* 图片宽度不超过容器 */
  /* height: auto; */
  /* 图片高度自适应 */
  border-radius: 50%;

  margin-top: auto;
  width: 50px;
  height: 50px;
}

.list-recommend-desc {
  flex: 0 0 66.67%;
  /* 标题部分占据 2/3 宽度 */
  display: flex;
  flex-direction: column;
  /* 子元素垂直排列 */
  justify-content: space-between;

}

.list-left-desc-title {
  flex: 1;
  /* 占据剩余空间的一部分 */
  display: flex;
  align-items: center;
  /* 垂直居中 */
  padding-top: 0;
}

.list-left-desc-title h2 {
  font-size: medium;
  height: 100%;
}


.list-left-desc-title h2:hover {
  /* 字体颜色 */
  color: #50db25;

}



.list-recommend-desc-recommend {
  flex: 1;
  /* 占据剩余空间的一部分 */
  display: flex;
}


.list-recommend-desc-recommend .my-button,
.list-recommend-desc-recommend .my-button.is-round {
  padding: 1px 1px;
  /* background-color: aqua; */
  border: none;
}

/* ==============================3.右边主内容 end ================================================== */